<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>13899 mvc Stateful Dates</title>

	<style>
		@import "../../../../dijit/themes/claro/document.css";
		@import "../../../util/doh/robot/robot.css";
		@import "../../../../dijit/tests/css/dijitTests.css";
		.cell { display:inline-block; }	
	</style>

	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../dojo/dojo.js"
		data-dojo-config="isDebug: true, parseOnLoad: false"></script>

	<!-- only needed for alternate theme testing: -->
	<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>

	<script type="text/javascript">
	var model;
			
		require([
			'dojo/parser',
			'dojox/mvc',
			'dojo/store/Memory',
			'dijit/form/DateTextBox',
			'dijit/CalendarLite',
			'dojox/mvc/StatefulModel',
			'dojox/mvc/Repeat',
			'dojox/mvc/Group',
			'dojox/mvc/at',
			'dijit/registry',
			'dijit/form/Button',
			'dojox/mvc/Output',
			'dijit/form/TextBox',
			'dojo/date/stamp',
			'dojo/dom',
			'dojo/dom-construct',			
			'dojo/on',
			'dojo/domReady!'
		], function (parser, mvc, Memory, DateTextBox, Calendar, StatefulModel, Repeat, Group, 
					at, registry, Button, Output, TextBox, dateStamp, dom, domconstruct) {
			window.at = at;

			// *** Test1 setup begin: ***
			var search_results_init1 =
				[{
					"Query" : "Engineers1",
					"Results" : [
						{
							"First"	  : "Anne1",
							"Last"	  : "Ackerman1"
						},
						{
							"First"	  : "Ben1",
							"Last"	  : "Beckham1"
						},
						{
							"First"	  : "Chad1",
							"Last"	  : "Chapman1"
						}
					]
				}];
				var search_results_init2 =
				[{
					"Query" : "Engineers2",
					"Results" : [
						{
							"First"	  : "Anne2",
							"Last"	  : "Ackerman2"
						},
						{
							"First"	  : "Ben2",
							"Last"	  : "Beckham2"
						}
					]
				}];
				var search_results_init3 =
				[{
					"Query" : "Engineers3",
					"Results" : [
						{
							"First"	  : "Chad3",
							"Last"	  : "Chapman3"
						}
					]
				}];

				var memStore1 = new Memory({data : search_results_init1});
				model1 = mvc.newStatefulModel({ store : memStore1 })[0];
				var memStore2 = new Memory({data : search_results_init2});
				model2 = mvc.newStatefulModel({ store : memStore2 })[0];
				var memStore3 = new Memory({data : search_results_init3});
				model3 = mvc.newStatefulModel({ store : memStore3 })[0];

			templateString = '<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: \'${this.index}\'">' +
				'<label class="cell">Name:</label>' + 
				'<input class="cell" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: \'First\'"></input>' +
				'<div  class="cell"  data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: \'Last\'"></div>' +
				'</div>';

			// I would like to be able to programmatically create the widgets
			// which would go into the repeat, but that is not possible now given the way the
			// repeat parses it's content when it is built
			
			// need to parse the declarative swap buttons 
			parser.parse("swapbuttons2");

			var swapb1 = new Button({
				onClick: function(){swapToModel(model1);},
				id: "swapbutton1",
				label: "Swap Model1"
			}, document.getElementById('swapbutton1'));
			swapb1.startup();

			var swapb2 = new Button({
				onClick: function(){swapToModel(model2);},
				id: "swapbutton2",
				label: "Swap Model2"
			}, document.getElementById('swapbutton2'));
			swapb2.startup();
			
			var swapb3 = new Button({
				onClick: function(){swapToModel(model3);},
				id: "swapbutton3",
				label: "Swap Model3"
			}, document.getElementById('swapbutton3'));
			swapb3.startup();
			
			var test2_repeat = new Repeat({
					ref: model1.Results
			}, document.getElementById('test2_repeat'));
			test2_repeat.startup();
			
			var test3_repeat = new Repeat({
					children: at(model1, 'Results')
			}, document.getElementById('test3_repeat'));
			test3_repeat.startup();
			
			var test1_repeat = new Repeat({
					templateString: templateString, // not needed with my.Repeat since it is set there.
					ref: model1.Results
			}, document.getElementById('test1_repeat'));
			test1_repeat.startup();

		});

		// called to reset the model for each of the repeats
		//function swapToModel(model) {
		//	console.log("called with "+model);
		//}
	</script>
</head>

<body class="claro">
	<h2>Test 1: A programmatic repeat using a Template with a textbox and an mvc output field.</h2>
	<div  style="border-style: solid; border-width: 2px; width: 827px;">
		<div id="test1_repeat">
		</div>
	</div>

	<h2>Test 2: A programmatic repeat with the html inline with an mvc output field and a textbox.</h2>
	<div  style="border-style: solid; border-width: 2px; width: 827px;">
		<div id="test2_repeat">
			<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'">
				<label class="cell">Name:</label> 
				<div class="cell" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: 'First'"></div>
				<input  class="cell"  data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Last'"></input>
			</div>	
		</div>
	</div>

	<h2>Test 3: A programmatic repeat with the html inline using mvc.at.</h2>
	<div  style="border-style: solid; border-width: 2px; width: 827px;">
		<div id="test3_repeat">
			<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:${this.index}')">
				<label class="cell">Name:</label> 
				<input  class="cell"  data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:First', 'value')"></input>
				<input  class="cell"  data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:Last', 'value')"></input>
			</div>	
		</div>
	</div>

	<h2>Test 4: Programmatic Swap models, this one is done by swapping between different models, I would like to be able to update the model data without replacing the model.</h2>
	<div id="swapbuttons" class="row">
		<div id="swapbutton1" ></div>
		<div id="swapbutton2" ></div>
		<div id="swapbutton3" ></div>
	</div>

	<h2>Test 5: Swap models, (these are declarative buttons) this one is done by swapping between different models, I would like to be able to update the model data without replacing the model.</h2>
	<div id="swapbuttons2" class="row">
		<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){swapToModel(model1);}">Swap Model1</button>
		<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){swapToModel(model2);}">Swap Model2</button>
		<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){swapToModel(model3);}">Swap Model3</button>		
	</div>

	
	<script type="text/javascript">
	function swapToModel(model) {
		require([
			"dijit/registry",
			"dojox/mvc/at"
		], function(registry, at){
			var widget = registry.byId("test1_repeat");
			widget.set("ref", model.Results);
			registry.byId("test2_repeat").set("ref", model.Results);
			registry.byId("test3_repeat").set("children", at(model, 'Results'));
		});
	}
</script>
	
</body>
</html>
